<template>
    <div class="changePassword">
            <p>修改密码</p>
            <el-form :model="ruleForm2" status-icon="" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
              <el-form-item label="旧密码 :" prop="oldPass">
                <el-input type="password" v-model="ruleForm2.oldPass" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="新密码 :" prop="pass">
                <el-input type="password" v-model="ruleForm2.pass" auto-complete="off" placeholder="请设置6~18位的新密码"></el-input>
              </el-form-item>
              <el-form-item label="再次输入 :" prop="checkPass">
                <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="请再次输入6~18位的新密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
              </el-form-item>
            </el-form>
        </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm2: {
        oldPass: "",
        pass: "",
        checkPass: ""
      },
      rules2: {
        oldPass: [{ validator: this.validateOldPass, trigger: "blur" }],
        pass: [{ validator: this.validatePass, trigger: "blur" }],
        checkPass: [{ validator: this.validatePass2, trigger: "blur" }]
      }
    };
  },
  methods: {
    // 旧密码规则
    validateOldPass: function(rule, value, callback) {
      if (value === "") {
        callback(new Error("旧密码不能为空"));
      } else {
        this.checkOldPass(callback); //验证旧密码
      }
    },
    // 新密码规则
    validatePass: function(rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value === this.ruleForm2.oldPass) {
        callback(new Error("新旧密码不能相同"));
      } else { 
        if (this.ruleForm2.checkPass !== "") {
          this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    },
    // 再次确认密码规则
    validatePass2: function(rule, value, callback) {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    },
    // 提交表单
    submitForm: function(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.submitData(); //提交数据
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 验证旧密码是否正确
    checkOldPass: function(callback) {
      let url = ``;
      let data = {};
      this.$http.post(url,data).then(res=>{
      	if(res.data.code == 1){ //旧密码验证成功
      		if (this.ruleForm2.pass !== '') {
      			this.$refs.ruleForm2.validateField('pass');
      		}
      		callback();
      	}else {  //旧密码验证失败
      		callback(new Error('密码错误'));
      	}
      })
    },
    //提交数据到后台
    submitData: function() {
      let url = ``;
      let data = {};
      this.$http.post(url,data).then(res=>{
      	if(res.data.code == 1){
      		alert('密码修改成功');
      	}else {
      		alert('密码修改失败');
      	}
      })
    }
  }
};
</script>


<style lang="less">
.changePassword {
  text-align: left;
  > p {
    margin-left: 35px;
    margin-top: 40px;
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
    color: #399bff;
    padding-bottom: 10px;
    border-bottom: 3px solid #399bff;
  }
  .el-form-item__content{
    height: 50px;
  }
  .el-form-item {
    height: 50px;
  }
  .demo-ruleForm {
     margin-top: 40px;
    margin-left: 35px;
    // 文字部分
    .el-form-item__label {
      font-size: 14px;
      color: #999999;
    }
    // 输入框和打钩部分
    .el-input {
      
      .el-input__inner {
        font-size: 14px;
        color: #cccccc;
        text-indent: 8px;
        // margin-top: 40px;
        border: 1px solid #cccccc;
        margin-left: 12px;
        height: 40px;
        width: 400px;
      }
      .el-input__suffix {
        left: -30%;
        
      }
    }
    //  密码有误时提示
    .el-form-item__error {
      left: 423px;
      top: 20.5%;
    }
    //  提交按钮
    .el-button--primary {
      width: 240px;
      height: 40px;
      border-radius: 40px;
      float: left;
      margin-top: 40px;
      margin-left: 80px;
      > span {
        font-size: 14px;
        color: #ffffff;
      }
    }
  }
}
</style>

